<template>
  <div class="city">
    <city-header :cities = "cities"></city-header>
    <city-list :letter="letter" :cities="cities" :hot="hotCities"></city-list>
    <city-search @change="letterChange" :cities="cities"></city-search>
  </div>
</template>

<script>
import CitySearch from "./components/Search";
import CityHeader from "./components/Header";
import CityList from "./components/List";
export default {
  name: "City",
  components: {
    CityHeader,
    CityList,
    CitySearch
  },
  data() {
    return {
      hotCities: [],
      cities: {},
      letter: ""
    };
  },
  mounted() {
    this.$axios.post("/api/cityList").then(res => {
      console.log(res.data.data);
      this.hotCities = res.data.data.hotCities;
      this.cities = res.data.data.cities;
    });
  },
  methods: {
    letterChange(letter) {
      this.letter = letter;
    }
  }
};
</script>

<style>
</style>